<template>
	<span
		:style="{
			'background-color': bgColor,
			'color': color,
			'border-radius': `${radius}px`,
			'padding': padding,
			'font-size': `${size}px`,
			'width': width,
			'height': height,
			'border': border
		}"
		class="tag"
		@click="$emit('click')"
	>
		<slot />
	</span>
</template>

<script>
export default {
  props: {
    bgColor: {
      type: String,
      default: '#00C9A9'
    },
    color: {
      type: String,
      default: '#ffffff'
    },
    radius: {
      type: Number,
      default: 8
    },
    padding: {
      type: String,
      default: '10px 12px'
    },
    size: {
      type: Number,
      default: 16
    },
    width: {
      type: String,
      default: 'auto'
    },
    height: {
      type: String,
      default: 'auto'
    },
    border: {
      type: String,
      default: 'none'
    },
  }
}
</script>

<style lang="scss" scoped>
.tag {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  overflow: hidden;
  text-align: center;
}
</style>
